import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'
import request from '../../comment/request/request'
import { AtButton, AtAvatar, AtSearchBar, AtTag, AtTabBar, AtRate, AtIcon } from 'taro-ui'
export default class Index extends Component {

  config = {
    navigationBarTitleText: '智慧燃气'
  }

  constructor(props) {
    super(props)
    this.state = {
      value: '',
      juli: true,
      current: 0,
      latitude: 0,
      longitude: 0,
      gasList:[]
    }
  }

  componentWillMount() { }

  componentDidMount() {
    Taro.getLocation().then(res => {
      console.log(res, 22)

      this.setState({
        latitude: res.latitude,
        longitude: res.longitude
      })
      setTimeout(() => {
        this.getGasStationGoods()
      }, 500)
    })





  }

  getGasStationGoods = () => {

    
    request._get(`/zhrq-web/gas/order/getGasStationGoods?latitude=${this.state.latitude}&longitude=${this.state.longitude}&orderNum=1`).then(res => {
      console.log(res,49)
      if(res.rc === 0) {
        this.setState({
          gasList:res.ret
        })
      }
     }).catch(e => {
      console.log(e)
     })
  }

  componentWillUnmount() { }

  onAtSearchBar = () => {

  }

  onActionClick = () => {

  }
  onAtTag = () => {
    this.setState({
      juli: !this.state.juli
    })
  }


  //跳转
  onDetails = (id) => {
    Taro.navigateTo({
      url: `../index.1/index?id=${id}`
    })
  }

  handleClick(value) {
    this.setState({
      current: value
    })
    console.log(value)
    if (value == 1) {
      Taro.redirectTo({
        url: '../index.4/index'
      })
    }

    if (value == 2) {
      Taro.redirectTo({
        url: '../index.7/index'
      })
    }


  }



  render() {
    return (
      <View className='index'>
        <View className='box_query'>

          <View className='query_L'>
            <AtAvatar size='small' circle image='http://storage.360buyimg.com/mtd/home/32443566_635798770100444_2113947400891531264_n1533825816008.jpg'></AtAvatar>
          </View>
          <View className='query_R'>
            <AtSearchBar
              actionName='搜一下'
              value={this.state.value}
              onChange={this.onAtSearchBar.bind(this)}
              onActionClick={this.onActionClick.bind(this)}
            />
          </View>


        </View>
        <map id="myMap"
          style="width:100%;height:200px;"
          longitude="116.313972"
          latitude="39.980014" scale='16'>
        </map>

        <View className='atTag'>

          <AtTag name='距离最近' type='primary' onClick={this.onAtTag.bind(this)} active={this.state.juli}>距离最近</AtTag>
          <AtTag name='好评优先' type='primary' >好评优先</AtTag>
          <AtTag name='销量最高' type='primary' >销量最高</AtTag>
          <AtTag name='经常使用' type='primary' >经常使用</AtTag>

        </View>

        <View className='list'>
        {this.state.gasList&&
          this.state.gasList.map((item) => {
            return  (
              <View className='list_item' onClick={this.onDetails.bind(this,item.id)}>
              <View className='item_L'>
                <Image
                  className='Image'
                  src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1759133402,2696021330&fm=26&gp=0.jpg'
                />
              </View>
              <View className='item_R'>
                <View className='item_t'>
                  <View className='rqz'>
                    <Text>{item.name}</Text>
                  </View>
                  <View className='juli'>
                    <Text style={{ fontSize: '12px', padding: '10px' }}>3.5km</Text>
                  </View>
                </View>
                <View className='item_m'>
  
                  <View>
                    <AtRate
                      value={3}
                      size='12'
                    />
  
                  </View>
                  <View>
                    <Text style={{ fontSize: '12px', margin: "0px 10px" }}>{item.evaluateLevel}评分</Text><Text style={{ fontSize: '12px', margin: "0px 10px" }}>月售{item.total}</Text>
                  </View>
  
  
  
                </View>
                <View className='item_b'>
                  <AtIcon value='map-pin' size='15' ></AtIcon><Text style={{ fontSize: '12px', margin: "0px 10px" }}>{item.place}</Text>
                </View>
              </View>
            </View>
            )
          })
        }

         


        </View>






        <AtTabBar
          fixed
          tabList={[
            { title: '订购', iconType: 'shopping-cart', text: 'new' },
            { title: '订单', iconType: 'shopping-bag', text: '100', max: '99' },
            { title: '投诉', iconType: 'mail' },
            { title: '我的', iconType: 'user', text: '100', max: '99' }
          ]}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />

      </View>
    )
  }
}

